<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器</title>
		<script src="Vue.js"></script>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				width:100%;
				height:100%;
			}
			#app{
				width:300px;
				min-height:100px;
				margin:50px auto;
				padding:20px;
				box-shadow:10px 20px 20px 10px gray;
			}
			p{
				margin:20px 0;
			}
			h3{
				height:40px;
				line-height:40px;
				text-align:center;
				background-color:black;
				color:white;
			}
			input{
				width:220px;
				height:25px;
				line-height:25px;
				text-align:center;
			}
			hr{
				margin:20px 0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3>过滤器-filter</h3>
			<p>
				<span>输入区: &nbsp;&nbsp;&nbsp;</span>
			    <input type="text" v-model="msg" v-focus placeholder="请输入内容:">
			</p>
			<div><span>显示区: &nbsp;&nbsp;&nbsp;</span>{{msg | upper}}</div>
			<hr>
			<div><span>显示区: &nbsp;&nbsp;&nbsp;</span>{{msg | upper |lower}}</div>
			<hr>
			<div :abc="msg | upper">测试数据</div>
		</div>
		
		<script>
			/* 
			 过滤器:格式化处理数据
			 
			【1】作用:格式化数据
			 -->比如将字符串格式化为首字母大写;
			 -->将日期格式化为指定的格式等;
			 
			【2】自定义过滤器
			 Vue.filter("name",function(value){
				 //过滤器业务逻辑
			 })
			 
			【3】使用
			 1,<div>{{msg | upper}}</div>
			 
			 2,<div>{{msg | upper | lower}}</div>
			 -->msg | upper | lower级联操作(msg | upper)的值 | lower
			 
			 3,<div v-bind:id="id | formatId"></div>
			 
			 */
			
			//全局过滤器
			Vue.filter("upper",function(val){//val为要处理的数据
				//首字母大写
				return val.charAt(0).toUpperCase()+val.slice(1);
			})
			
			Vue.filter("lower",function(val){//val为要处理的数据
				//首字母大写
				return val.charAt(0).toLowerCase()+val.slice(1);
			})
			
			let vm = new Vue({
				el:"#app",
				data:{
					msg:""
				},
				directives:{//局部自定义指令
					"focus":{
						inserted:function(el){
							el.focus();
						}
					}
				},
				filters:{//局部过滤器
					upper:function(val){
						return val.charAt(0).toUpperCase()+val.slice(1);
					}
				}
			})
		</script>
	</body>
</html>
